<template>
    <div :style="{
        'height': pageConfig.formH + 'px',
        'width': pageConfig.formW + 'px',
        'background': '#fff',
        'margin': 'auto',
        'margin-top': '21px',
        'padding-top': pageConfig.formPaddingT + 'px',
        'padding-left': pageConfig.formPaddingL + 'px',
        'padding-right': pageConfig.formPaddingR + 'px',
        'padding-Bottom': pageConfig.formPaddingB + 'px',
        'background': pageConfig.choseBackColor != '1' ? '' : pageConfig.fromBackColor,
        'opacity': (pageConfig.formBackTransp * 0.01),
        'transform': pageConfig.formDirection == '纵向' ? '' : 'rotate(270deg)',
        'border': pageConfig.choseBorder != '1' ? '' : '1px solid ' + pageConfig.borderColor,
        'background-image': pageConfig.choseBackImg == '1' ? `url(${this.apiUrl}system/annexesfile/${pageConfig.formBackImage}?token=${this.token})`:'',
        'background-size': pageConfig.backImageW + 'px ' + pageConfig.backImageH + 'px',
        'background-repeat':pageConfig.backRepeat == '不重复'?'no-repeat':'',
    }">
        {{ pageConfig }}
        <div v-if="pageConfig.choseHead == '1'" :style="{ 'margin-top': pageConfig.headT + 'px', }">
            页眉
        </div>
        <l-draggable v-for="(item, index) in centerList" :left="parseInt(item.left)" :top="parseInt(item.top)" :key="index"
            :activeFlag="item.activeFlag" @focus="handleFocus(index)">

            <!-- text -->
            <div v-if="item.type == 'text'" :style="{
                'width': parseInt(item.width) + 'px',
                'height': parseInt(item.height) + 'px',
                'color': item.textColor,
                'background': item.background,
                'font-family': item.fontFamily,
                'font-size': item.fontSize + 'px',
                'font-weight': item.fontWeight,
                'writing-mode': item.writingMode,
                'font-style': item.fontStyle,
                'text-decoration': item.textDecoration,
                'opacity': (item.opacity * 0.01),
                '-webkit-text-stroke': item.textShadow == '1' ? '2px ' + item.textShadowColor : '',
            }">
                {{ item.content }}
            </div>
        </l-draggable>
        <div v-if="pageConfig.choseBottom == '1'" :style="{
            'position': 'absolute',
            'bottom': pageConfig.headB + 'px',
        }">
            页脚
        </div>
    </div>
</template>
<script>
// import img from '../../../../datav/option/components/img.vue'

export default {
    // components: { img },
    props: ['centerList', 'pageConfig', 'listIndex'],
    data() {
        return {
        }
    },
    methods: {
        handleFocus(e) {
            this.$emit('update:listIndex', e)
        },
    }
}
</script>

<style>
.center_div {
    width: 100%;
    height: 100%;
    background: #ddd;
}
</style>